<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('修改分组')" />
  <th:block th:include="include :: bootstrap-tagsinput-css" />
  <style>
    label {
      text-align: right;
      margin: 5px 0;
    }
  </style>
</head>
<body class="white-bg">

  <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-mygroup-edit" th:object="${data}">
      <input name="version" th:field="*{version}" type="hidden" />
      <div class="form-group">
        <label class="col-xs-2 control-label is-required" style="padding-right: 0;">分组名称：</label>
        <div class="col-xs-10">
          <input name="group" th:field="*{group}" class="form-control" type="text" readonly required />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-2 control-label is-required" style="padding-right: 0;">Own User：</label>
        <div class="col-xs-10">
          <input name="ownUser" th:field="*{ownUser}" class="form-control" type="text" autocomplete="off" required />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-2 control-label" style="padding-right: 0;">Dev Users：</label>
        <div class="col-xs-10">
          <input type="text" name="devUsers" th:field="*{devUsers}" autocomplete="off" data-role="tagsinput" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-2 control-label" style="padding-right: 0;">Alarm Users：</label>
        <div class="col-xs-10">
          <input type="text" name="alarmUsers" th:field="*{alarmUsers}" autocomplete="off" data-role="tagsinput" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-2 control-label" style="padding-right: 0;">Web Hook：</label>
        <div class="col-xs-10">
          <input name="webHook" th:field="*{webHook}" class="form-control" type="text" autocomplete="off" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-xs-2 control-label" style="padding-right: 0;">Context path：</label>
        <div class="col-xs-10">
          <input name="workerContextPath" th:field="*{workerContextPath}" class="form-control" type="text" autocomplete="off" />
        </div>
      </div>
    </form>
  </div>

  <th:block th:include="include :: footer" />
  <th:block th:include="include :: bootstrap-tagsinput-js" />

  <script th:inline="javascript">
    const prefix = ctx + "disjob/mygroup";

    $("#form-mygroup-edit").validate({
      focusCleanup: true,
      onkeyup: false,
      rules: {
        ownUser: {
          required: true,
          regex: /^(?!.*,).*/    // /^[^,]*$/
        }
      },
      messages: {
        ownUser: {
          required: "Own user cannot empty",
          regex: "Own user cannot contains char ','"
        }
      }
    });

    function submitHandler() {
      if ($.validate.form()) {
        $.operate.save(prefix + "/edit", $('#form-mygroup-edit').serialize());
      }
    }

    $(function () {
      /*
      $("input[tagsinput]").tagsinput({
        typeahead: {
          source: function (term) {
            return $.get(prefix + "/search_user?term=" + term);
          }
        }
      });
      */
      $("div[class='bootstrap-tagsinput']").addClass("col-xs-12");

      if (![(${isOwnUser})]) {
        $("input[name='ownUser']").attr("readonly", "true")
        $("input[name='workerContextPath']").attr("readonly", "true")
      }
    });
  </script>

</body>
</html>
